<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!-- begin::Head -->
<head>
    <title>
        后台管理 | 频道管理
    </title>

    <th:block th:include="includes/header :: header"></th:block>
</head>
<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default"  >

<div class="m-portlet">
    <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
                <span class="m-portlet__head-icon m--hide"> <i class="la la-gear"></i> </span>
                <h3 class="m-portlet__head-text"> 频道管理 </h3>
            </div>
        </div>
    </div>
    <!--begin::Form-->
    <form class="m-form" action="/channel/save" method="post">
        <div class="m-portlet__body">
            <div class="m-form__section m-form__section--first">
                <div class="form-group m-form__group row">
                    <label class="col-lg-3 col-form-label"> 父级频道 </label>
                    <div class="col-lg-6">
                        <input id="pid" name="pid" type="hidden" />
                        <input id="pidText" type="text" class="form-control m-input" placeholder="请选择" readonly data-toggle="modal" data-target="#m_modal_1" />
                    </div>
                </div>

                <div class="form-group m-form__group row">
                    <label class="col-lg-3 col-form-label"> 频道名称 </label>
                    <div class="col-lg-6">
                        <input name="name" type="text" class="form-control m-input" placeholder="频道名称" />
                    </div>
                </div>

                <div class="form-group m-form__group row">
                    <label class="col-lg-3 col-form-label"> 排序 </label>
                    <div class="col-lg-6">
                        <input name="sort" type="number" class="form-control m-input" placeholder="排序" />
                    </div>
                </div>
            </div>
        </div>
        <div class="m-portlet__foot m-portlet__foot--fit">
            <div class="m-form__actions m-form__actions">
                <div class="row">
                    <div class="col-lg-3"></div>
                    <div class="col-lg-6">
                        <button type="submit" class="btn btn-success"> 提交 </button>
                        <button type="reset" class="btn btn-secondary" onclick="history.go(-1);"> 返回 </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <!--end::Form-->
</div>

<div class="modal fade" id="m_modal_1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"> 父级频道 </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"> &times; </span> </button>
            </div>
            <div class="modal-body">
                <div id="m_tree_1" class="tree-demo"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal"> 关闭 </button>
                <button type="button" class="btn btn-primary" data-dismiss="modal"> 选择 </button>
            </div>
        </div>
    </div>
</div>

<th:block th:include="includes/footer :: footer"></th:block>
<script src="/assets/app/js/treeview.js" type="text/javascript"></script>
<script>
    $(function () {
       TreeView.initTree("m_tree_1", "/channel/tree", function (obj, e) {
           var currentNode = e.node;
           $("#pid").val(currentNode.id);
           $("#pidText").val(currentNode.text);
       });
    });
</script>
</body>
</html>